<template>
    <div id="box">
        <div id="login-container">
            <div id="title">智慧生活管理系统</div>
            <login v-if="!flag"/>
            <register v-else @success="regSuccess" />
            <div class="change-mode">
                <a href="" @click="changeMode">{{ flag ? '去登陆' : '去注册'}}</a>
            </div>
        </div>
    </div>
</template>

<script>
import login from "./login.vue";
import register from "./register.vue";
export default {
    name: "mainView",
    components: {
        login,
        register,
    },
    data() {
        return {
            // false 表示登录
            flag: false,
        };
    },
    methods: {
        changeMode(e) {
            e.preventDefault();
            this.flag = !this.flag;
        },
        // 注册成功
        regSuccess() {
            this.flag = false;
        }
    },
};
</script>
<style scoped lang="less">
#box {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: url("../../static/img/background.jpg") no-repeat center;
    background-size: cover;
    #login-container {
        width: 470px;
        background: #e5e9f2;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        padding: 60px;
        padding-top: 30px;
        padding-bottom: 30px;
        #title {
            text-align: center;
            width: 100%;
            height: 50px;
            font-size: 18px;
            font-weight: bold;
            color: rgb(56, 56, 56);
        }
        .change-mode{
            text-align: right;
            line-height: 40px;
        }
    }
}
</style>
